<template>
  <div>
    <Select v-model="handleValue" :filterable="filterable" clearable :disabled="disabled" :multiple="multiple" :transfer="transfer"
      @on-change="onChange($event)" :placeholder="placeholderText">
      <Option v-for="item in items" :value="item.value" :key="item.value" :label="item.label"
        :disabled="item.value === disabledOne ? true : false">
        <span>{{ item.label }}</span>
      </Option>
    </Select>
  </div>
</template>

<script>
  import _ from 'lodash'
  import {
    typeOf,
    oneOf
  } from '@/libs/jss/tools'
  export default {
    name: 'BaseSelect',
    props: {
      value: {
        type: [String, Number, Array, Boolean],
        default: ''
      },
      optionType: {
        validator(value) {
          return oneOf(value, ['string', 'number'])
        },
        default: 'string'
      },
      disabled: {
        type: Boolean,
        default: false
      },
      disabledOne: {
        type: [Number, String],
        default: ''
      },
      filterable: {
        type: Boolean,
        default: true
      },
      readMethod: {
        type: Function
      },
      readData: {
        type: Array
      },
      textField: {
        type: String,
        default: 'itemName'
      },
      valueField: {
        type: String,
        default: 'itemKey'
      },
      multiple: {
        type: Boolean,
        default: false
      },
      transfer: {
        type: Boolean,
        default: false
      },
      placeholder: {
        type: String,
        default: ''
      },
      selectIndex: {
        type: Number,
        default: null
      }
    },
    data() {
      return {
        items: []
      }
    },
    created() {
      if (this.readData) {
        this.items = this.convertItems(this.readData)
      } else if (typeOf(this.readMethod) === 'function') {
        this.readMethod().then(res => {
            this.items = this.convertItems(res.data)
            // this.$emit
          })
          .catch(error => {
            console.log(error)
          })
      }
    },
    methods: {
      onChange(value) {
        if (this.multiple === true) {
          this.$emit(
            'on-change',
            value,
            this.selectIndex >= 0 ? this.selectIndex : ''
          )
        } else if (typeOf(value) === 'number') {
          this.$emit(
            'on-change',
            _.parseInt(value),
            this.selectIndex >= 0 ? this.selectIndex : ''
          )
        } else {
          this.$emit(
            'on-change',
            value,
            this.selectIndex >= 0 ? this.selectIndex : ''
          )
        }
      },
      convertItems(data) {
        let items = data.map(v => {
          let value = v[this.valueField] || ''
          let label = v[this.textField] || ''
          return {
            value,
            label
          }
        })
        return items
      }
    },
    computed: {
      placeholderText() {
        return this.placeholder || '点击选择'
      },
      // 兼容Number/String
      handleValue:{
        get(){
          if (this.optionType === 'string' && this.multiple === false) {
            return this.value + ''
          } else {
            return this.value
          }
        },
        set() {
          if (this.optionType === 'string' && this.multiple === false) {
            return this.value + ''
          } else {
            return this.value
          }
        }
      }
    },
    watch: {
      readData(n) {
        if (n) {
          this.items = this.convertItems(n)
        }
      }
    }
  }

</script>

<style lang="less" scoped>
/deep/ .ivu-select-input {
  display: block;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
